<template>
    <div>
        <el-card class="operate-container" shadow="never">
                <i class="el-icon-tickets"></i>
                <span>数据列表</span>
        </el-card>
         <el-form :model="form" label-width="100px" class="product-form" ref="form">
            <el-form-item label="图片链接" prop="picture">
                <el-input v-model="form.picture" placeholder="请输入图片链接"></el-input>
            </el-form-item>

            <el-form-item label="商品名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
            </el-form-item>

            <el-form-item label="价格" prop="price">
                <el-input v-model="form.price" placeholder="请输入价格"></el-input>
            </el-form-item>

            <el-form-item label="货号" prop="number">
                <el-input v-model="form.number" placeholder="请输入货号"></el-input>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
            </el-form-item>

            <el-form-item label="销量" prop="sale">
                <el-input v-model="form.sale" placeholder="请输入销量"></el-input>
            </el-form-item>

            <el-form-item label="审核状态" prop="status">
                <el-input v-model="form.status" placeholder="请输入审核状态"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
   
</template>

<script>
import axios from 'axios';

export default {
    name: 'ProductForm',
    data() {
        return {
            form: {
                name: '',
                price: '',
                number: '',
                sort: '',
                sale: '',
                status: '',
                picture: ''
            }
        };
    },
    methods: {
        submitForm() {
            axios.post(this.$httpUrl + '/productList/save', this.form).then(res => res.data).then(res => { // 更新 API 端点
                if (res.code == 200) {
                    this.$message({
                        message: '操作成功！',
                        type: 'success'
                    });
                    this.centerDialogVisible = false
                    this.loadPost()
                    this.resetForm()
                } else {
                    this.$message({
                        message: '操作失败！',
                        type: 'error'
                    });
                }
            })
        },
        resetForm() {
            this.$refs.form.resetFields();
        }
    }
};
</script>

<style scoped>
.product-form {
    max-width: 600px;
    margin: 50px auto 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>